import VueRouter from 'vue-router'
import CountComponent from '../pages/Count.vue'
import PersonComponent from '../pages/Person.vue'
import MessageComponent from '../pages/Message.vue'
import NewsComponent from '../pages/News.vue'
import OthersComponent from '../pages/Others.vue'
import DetailComponent from "@/pages/Detail.vue";


const projectRouter = new VueRouter({
    routes: [
        {
            path: '/count',
            name: 'count',
            component: CountComponent,
            meta: {
                title: '计数'
            },
        },
        {
            path: '/person',
            name: 'person',
            component: PersonComponent,
            meta: {
                title: '个人中心'
            },
        }
        ,
        {
            path: '/message',
            name: 'message',
            component: MessageComponent,
            meta: {
                title: '消息'
            },
            children: [
                {
                    path: 'news',
                    name: 'news',
                    component: NewsComponent,
                    meta: {
                        isAuth: true,
                        title: '新闻'
                    },
/*                    beforeEnter: (to, from, next) => {
                        let auth = localStorage.getItem('auth') //获取本地存储的权限
                        if (auth === 'full') {
                            next()
                            return
                        }
                        alert('权限不足')
                        return;
                    },*/
                    children: [
                        {
                            //使用params传参 需要在path中使用占位符
                            path: 'detail/:id/:title/:content/:author/:date',
                            name: 'detail',
                            component: DetailComponent,
                            meta: {
                                isAuth: true,
                                title: '新闻详情'
                            },
                            //第一种写法 props对象中的所有key-value以props的形式传递给组件
                            // props: {
                            //     a: 1,
                            //     b: 'hello'
                            // }
                            //若props为true 则会把params参数以props的形式传递给组件（query参数无法使用）
                            //props: true
                            //第三种写法 props为函数 可以自定义参数 这种写法可以使用query参数
                            props($route) {
                                return {
                                    id: $route.params.id,
                                    title: $route.params.title,
                                    content: $route.params.content,
                                    author: $route.params.author,
                                    date: $route.params.date
                                }
                            }
                        }
                    ]
                },
                {
                    path: 'others',
                    name: 'others',
                    component: OthersComponent,
                    meta: {
                        //在meta中配置属性 用于在路由守卫回调函数中判断是否需要鉴权
                        isAuth: true,
                        title: '其他'
                    },
                }
            ]
        }
    ]
})

/*
let auth = localStorage.getItem('auth')
//全局前置路由守卫 初始化时调用一次 每次路由切换之前调用一次
projectRouter.beforeEach((to, from, next) => {
    /!*if (to.path === '/message/news' || to.path === '/message/others') {
        if (auth === 'full') {
            next()
            return
        }
        alert('权限不足')
        return;
    }*!/
    if (to.meta.isAuth) {
        if (auth === 'full') {
            next()
            return
        }
        alert('权限不足')
        return;
    }
    next()
})
//全局后置路由守卫 初始化时调用一次 每次路由切换之后调用一次
projectRouter.afterEach((to) => {
    //修改网页的title  路由切换后会自动调用
    document.title = to.meta.title || '默认'
})*/

export default projectRouter
